$( document ).on( "ready", function() {
	
	$('.opciones, .top, .left, .right,  .footer, .content').sortable({
		connectWith: ['.top' , '.left', '.right', '.footer', '.content' , '.opciones' ],
		handle: 'h2',
		cursor: 'move',
		placeholder: 'placeholder',
		forcePlaceholderSize: false,
		opacity: 0.4,
		revert : true,
		stop: function(event, ui){
			//$(ui.item).find('h2').click();
			var sortorder='';
			$('.top, .left, .right, .content, .footer').each(function()
			  {
				var itemorder=$(this).sortable('toArray');
				var columnId=$(this).attr('id');
				sortorder+=columnId+'='+itemorder.toString()+'&';
			  });
			
			//console.log( ui.item );
			//console.log( $(ui.item).find('.titulo') );
			console.log('SortOrder: '+sortorder);
			/*Pass sortorder variable to server using ajax to save state*/
		}
	})
	.disableSelection();
});

